<script>
  export default {
    data(){
      return {
        currentStepIndex: 0,
        stepList: [
          {name: '第一步'},
          {name: '第二步', icon: 'trusty', selectIcon: 'trusty-fill'},
          {name: '第三步', icon: 'safe', selectIcon: 'safe-fill'},
          {name: '第四步', icon: 'vip', selectIcon: 'vip-fill'}
        ]
      }
    },
    methods: {
      onPrevClick(){
        let current = this.currentStepIndex
        current--
        this.currentStepIndex = current < 0 ? 0 : current
      },
      onNextClick(){
        let current = this.currentStepIndex
        current++
        this.currentStepIndex = current > this.stepList.length ? this.stepList.length : current
      },
      onStepClick(e){
        this.currentStepIndex = e.index
      }
    }
  }
</script>

<template>
  <view class="container tn-safe-area-inset-bottom">
    <tn-nav-bar>步骤条</tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 操作按钮 -->
      <view class="operate_btn">
        <view>
          <tn-button
            backgroundColor="tn-bg-indigo"
            fontColor="tn-color-white"
            @click="onPrevClick"
          >上一步</tn-button>
        </view>
        <view>
          <tn-button
            backgroundColor="tn-bg-indigo"
            fontColor="tn-color-white"
            @click="onNextClick"
          >下一步</tn-button>
        </view>
      </view>
      <!-- 步骤条 -->
      <!-- 其他模式: number icon dotIcon -->
      <view class="content">
        <tn-steps
          :list="stepList"
          :current="currentStepIndex"
          @click="onStepClick"
          mode="icon"
        ></tn-steps>
      </view>
    </view>
    <view class="tn-padding-bottom-lg"></view>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
  .operate_btn {
    position: fixed;
    width: 100%;
    height: 50rpx;
    padding: 0 30rpx;
    margin: 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
  }
  .content {
    margin-top: 120rpx;
  }
</style>